import React from 'react'

class Index extends React.Component {
    constructor (props) {
        super(props)
    }
    onClick () {
        alert(1)
    }
    render () {

        return (
            <div>
                <button onClick={() => {
                    this.onClick()
                }}>按钮1</button>
            </div>
        )
    }
}
export default Index


// 实现一个装饰器，用来复用基础组件Index,每一个装饰器可以覆盖组件部分功能

// 装饰器1，覆盖onClick
function AppWrapper1 (config = {}) {
    return function (Component) {
        return class Demo extends Index {
            constructor(props) {
                super(props)
            }
            onClick () {
                alert('覆盖onClick')
            }
        }
    }

}
// 装饰器2，覆盖render
function AppWrapper2 (config = {}) {
    return function (Component) {
        return class Demo extends Index {
            constructor(props) {
                super(props)
            }
            render () {
                return (
                    <div onClick={() => {
                        this.onClick()
                    }}>文本1，覆盖render</div>
                )
            }
        }
    }
}
export const App1 =  AppWrapper1()(Index)
export const App2 =  AppWrapper2()(Index)